<template>
  <div>
    <a-modal v-model:visible="modelValue" :width="500" :okText="showOkText()" @cancel="handleCancel" @ok="handleOk">
      <div v-if="courseDetail" style="padding: 30px">
        课程详情 <div>{{ courseDetail.title }}</div>
        <div>{{ courseDetail.desc }}</div>
        <div>{{ courseDetail.teacherName }}</div>

        <div></div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { getToken } from '/@/utils/auth';
  import { message } from 'ant-design-vue';
  import { router } from '/@/router';
  import { saveOrUpdate } from '../../myCourseManagement/MyCourseManagement.api';

  interface Props {
    modelValue: boolean;
    courseDetail: any;
    myCourseList: [];
  }
  const props = withDefaults(defineProps<Props>(), {});

  const emit = defineEmits(['update:modelValue']);

  const modelValue = computed({
    get: () => {
      return props.modelValue;
    },
    set: (val) => {
      emit('update:modelValue', val);
    },
  });

  const handleCancel = () => {
    modelValue.value = false;
  };

  const showOkText = () => {
    if (!props.courseDetail || !props.courseDetail.id) {
      return;
    }
    return props.myCourseList.findIndex((child) => child.courseId == props.courseDetail.id) == -1 ? '选择课程' : '确定';
  };

  const handleOk = async () => {
    if (!getToken()) {
      router.replace({ path: PageEnum.BASE_LOGIN, query: { redirect: 'index' } });
      return;
    }
    const index = props.myCourseList.findIndex((child) => child.courseId == props.courseDetail.id);
    if (index > -1) {
      modelValue.value = false;
      return;
    }
    const params = {
      ...props.courseDetail,
      courseId: props.courseDetail.id,
    };
    const res = await saveOrUpdate(params, false);
    console.log('index 添加课程 res ==>', res);
    message.success('添加成功');
    modelValue.value = false;
  };
</script>

<style lang="less"></style>
